<template>
  <div class="warn-group">
    <div v-for="(warnLine ,index) in props.column" :key="warnLine.index" class="warn-line">
      <div v-if="warnLine.type === 'line'" class="gapLine"></div>

      <template v-else>
        <div class="index">{{ warnLine.index }}</div>
        <div :class="warnLine.type" class="title">{{ warnLine.title }}</div>
        <div class="content">
          <div v-for="item in warnLine.items" :key="item.key" class="items">
            <div class="name">{{ item.title }}</div>
            <div class="itemType">
              <template v-if="item.type === 'input'">
                <a-input v-model:value="timeData[item.key]" :placeholder="item.placeholder || '请输入'"/>
              </template>
              <div v-if="item.type === 'number'" class="number">
                <!--            <a-input v-model:value="timeData[item.key]" :placeholder="item.placeholder || '请输入'"/>-->
                <a-input-number v-model:value="timeData[item.key]" :min="1" class="numberInput"/>
              </div>
              <template v-if="item.type === 'TimePick'">
                <div class="TimePick">
                  <a-time-range-picker v-model:value="timeData[item.key]"
                                       :disabled="item.disabled"
                                       :placeholder="item.key==='weig'?['开始时间','---']:['开始时间','结束时间']"
                                       format="HH:mm:ss"
                                       value-format="HH:mm:ss"
                                       @change="item.change($event,timeData,item)"
                  />
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="switch flex-center">
          <div class="flex-center">
            <a-switch
                v-model:checked="timeData[warnLine.switchKey]"
                :checkedValue="1"
                :unCheckedValue="2"
                checked-children="开"
                un-checked-children="关"
            />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import {inject} from "@vue/runtime-core";
import {ref} from "@vue/reactivity";

const pick = ref([]);
const props = defineProps({
  column: {
    type: Array,
    default: []
  },
});
const timeData = inject("timeData");

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
